<template>
   <div class="list">
       <!-- <h1>这列表数据组件内容</h1> -->
       <h5>8.18 周4</h5>
        <dl v-for="(item,index) in list" :key="index" @click="toDetail(item.id)">
            <dt><img :src="item.img" alt=""></dt>
            <dd>
                <h3>《{{item.title}}》</h3>
                <b>{{item.name}},{{item.name2}},{{item.name3}} </b>
                <p>{{item.date}}<span>{{item.title}}</span></p>
            </dd>
            <dd><span class="num">{{item.num}}</span><br><button>购买</button></dd>
        </dl>
   </div>
</template>

<script>
export default {
  props:["list"],
  methods:{
      toDetail(id){
          this.$router.push({
              name:"Detail",
              params: {
                  // url的参数, 类似get请求的传参
                  id:id
              },
          })
      }
  }
}
</script>

<style lang="scss">
.list{
   width: 100%;
   height: 50%;
   border: 1px solid #000;
   overflow-y: scroll;
   margin-top: 20px;
   dl{
      width: 100%;
      height: 140px;
      border-bottom: 1px solid #000;
      line-height: 30px;
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      dt{
          img{
              width: 100px;
              height: 130px;
          }
      }
      dd{
          margin-left: 20px;
          button{
              width: 100px;
              height: 40px;
              background-color: aqua;
              border-radius: 10px;
              color: #fff;
              outline: auto;
              margin-top: 30px;
          }
          .num{
             color: orange;
          }
      }
   }
}
</style>